<template>
  <div>
    <el-radio-group v-model="form.date_tag" class="mr-4" @change="handleChange">
      <el-radio-button :label="-1">昨天</el-radio-button>
      <el-radio-button :label="1">今天</el-radio-button>
      <el-radio-button :label="3">近3天</el-radio-button>
      <el-radio-button :label="7">近7天</el-radio-button>
      <el-radio-button :label="30">近30天</el-radio-button>
      <el-radio-button :label="0">自定义</el-radio-button>
    </el-radio-group>
    <div v-if="form.date_tag === 0" class="flex items-center mt-4">
      <el-date-picker
        v-model="date"
        type="daterange"
        value-format="yyyy-MM-dd"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @blur="handleDate"
        :picker-options="pickerOptions"
      >
      </el-date-picker>
      <!-- <div
        class="btn-contrast mx-4 text-blue-500"
        @click="contrast = !contrast"
      >
        时间对比
      </div>
      <el-date-picker
        v-if="contrast"
        v-model="contrast_date"
        type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @blur="handleContrastDate"
        :picker-options="pickerOptions"
      >
      </el-date-picker> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "SelectTime",
  data() {
    return {
      date: null,
      form: {
        date_tag: -1,
        start_date: "",
        end_date: ""
      },
      contrast: false,

      choiceDate: "",
      pickerOptions: {
        // 选择日期时
        onPick: ({ maxDate, minDate }) => {
          // 将开始时间置为选择时间
          this.choiceDate = minDate.getTime();
          // 当选择了结束时间
          if (maxDate) {
            // 清除选择时间
            this.choiceDate = "";
          }
        },
        disabledDate: time => {
          let self = this;
          // 如果有选择时间，即选择了开始时间后
          if (self.choiceDate) {
            // 开始时间
            let startDay = self.choiceDate;
            // 限制结束时间只能是未来180天
            let endDay = startDay + 24 * 3600 * 1000 * 180;
            // 如果未来180天超过了今天
            if (endDay > Date.now()) {
              // 将结束时间置为明天,如果不想包含今天，就减去 8.64e7
              endDay = Date.now();
            }
            return (
              // 选择开始时间后，返回限制条件
              time.getTime() < startDay - 24 * 3600 * 1000 * 180 ||
              time.getTime() > endDay
            );
          } else {
            return (
              //　默认打开时限制不能选择当前日期以后的天数
              time.getTime() > Date.now()
            );
          }
        }
      }
    };
  },
  watch: {
    "form.time": function(newValue, oldValue) {
      if (oldValue === 0) {
        this.date = null;
        this.contrast_date = null;
        this.contrast = false;
      }
    }
  },
  methods: {
    handleChange(value) {
      if (value !== 0) {
        this.$emit("handleChange", this.form);
      }
    },
    handleDate() {
      if (this.date && this.date.length === 2) {
        this.form.start_date = this.date[0];
        this.form.end_date = this.date[1];
        this.$emit("handleDate", this.form);
      }
    }
    // 时间对比
    // handleContrastDate() {
    //   if (this.contrast_date && this.contrast_date.length === 2) {
    //     this.form.contrast_date_start = this.contrast_date[0];
    //     this.form.contrast_date_end = this.contrast_date[1];
    //     this.$emit("handleContrastDate", this.form);
    //   }
    // }
  }
};
</script>
<style lang="scss" scoped>
.btn-contrast {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
